<template>
    <div class="case-detail">
        <el-row>
            <el-col :span="24" style="position: relative;">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name"></el-tab-pane>
                </el-tabs>
                <div class="formbtn" style="position: absolute;top: 5px;right:10px">
                    <slot name="btns"></slot>
                </div>
                <div>
                    <slot name="beforeend"></slot>
                    <slot name="cluetransfer"></slot>
                    <slot name="casestart"></slot>
                </div>
            </el-col>
        </el-row>
        <div class="case-body">
            <base-info
                    v-show="activeName=='base-info'"
                    ref="base-info"
                    @changezfml="changeZfml"
                    :edit = "readonly"
                    :type-list="distData.typeList"
                    :tree-list="distData.treeList"
                    :complaintlist ="distData.complaintlist"
            />
            <eveidence-info v-show="activeName=='eveidence-info'"
                            :edit = "readonly"
                            ref="eveidence-info"
            />
            <callback-info
                    v-show="activeName=='callback-info'"
                    :edit = "readonly"
                    ref="callback-info" />
            <slot name="cust-panel"></slot>
        </div>
    </div>
</template>
<script>
    // import { mapActions } from "vuex";
    import { mapActions, mapGetters, mapState } from "vuex";
    import FormBtns from "@/views/comps/zhzf/form-btns";
    import dictCache from "@/assets/utils/cache-dict-util";
    import baseInfo from "@/views/evidence/detail/base";
    import caseApi from "@/api/system/case";
    import eveidenceInfo from "@/views/evidence/detail/eveidence";
    import callbackInfo from "@/views/evidence/detail/callback";
    import beforeendInfo from "@/views/evidence/detail/beforeend";
    import casestartInfo from "@/views/evidence/detail/casestart";
    import cluetransferInfo from "@/views/evidence/detail/cluetransfer";
    import deptApi from "@/api/system/dept";
    import caseclueApi from "@/api/system/caseclue";
    import utils from "@/assets/utils/zhzf-util";
    export default {
        name:'casedetail',
        props:{
            readonly:{
                type:Boolean,
                default:true,
            },
            hideBtn:{
                type:Boolean,
                default:true
            }
        },
        data() {
            return {
                tabs: [
                    { label: "投诉", name: "base-info" },
                    { label: "证据附件", name: "eveidence-info" },
                    { label: "处理反馈", name: "callback-info" }
                ],
                extTab:{},
                loading: false,
                detail: {},
                from: {},
                tabName:'',
                activeName: "base-info",
                eveidenceInfoflag: "",
                distData: {
                    typeList: [],
                    litiganttypelist: [],
                    treeList: [],
                    zftypelist: [],
                    complaintlist: [],
                }
            };
        },
        components: {
            FormBtns,
            baseInfo,
            eveidenceInfo,
            callbackInfo,
            beforeendInfo,
            cluetransferInfo,
            casestartInfo
        },
        computed: {
            ...mapState("d2admin/user", ["info"])
        },
        methods: {
            ...mapActions("d2admin/page", ["close"]),
            cancle() {
                this.close({ tagName: "/evidence/register/detail" });
            },
            addtab(tab){
                this.extTab[tab.name]=tab;
                this.tabs.push(tab);
            },
            changeZfml() {
                let typename;
                if (this.detail.zfmlName == undefined) {
                    typename = this.detail.zfml;
                } else {
                    typename = this.detail.zfmlName;
                }
                let zfml = { label: typename, name: "road-info" };
                this.tabs[3] = zfml;
                this.$forceUpdate();
            },
            async initPage(detail) {
                this.detail = detail || {};
                this.from = this.detail;
                // this.getTestDetail();
                this.loadDistData();
            },
            getDetail(){
                return this.detail;
            },
            async _fetchData(param) {
                param = Object.assign({ type: 1 }, param || {});
                let res = await deptApi.deptPage(param);
                return res.data;
            },
            async loadDistData() {
                let res = await dictCache.getDataList("0048"); //执行类型
                this.distData.typeList = res;
                this.distData.litiganttypelist = await dictCache.getDataList("0050");
                this.distData.zftypelist = await dictCache.getDataList("0055"); //执法门类
                this.distData.cartypelist = await dictCache.getDataList("0064"); //执法门类
                let datalist = await this._fetchData();
                let treeList = utils.generatorDeptTree(datalist);
                this.distData.treeList = treeList.treeList;

                this.distData.complaintlist = await dictCache.getDataList("0063");//投诉来源
                this.loadChildPage();
            },
            loadChildPage() {
                if (!this.$refs[this.activeName]) {
                    return;
                }
                //判断执法门类，根据类型加载子页面
                this.$refs[this.activeName].initPage(this.detail, this.distData);
            },
            handleClick(event,tab) {
                this.tabName = tab.name;
                this.loadChildPage();
                this.$emit('tabclick',event)
            },
            async caseRegister(){ //立刻立案
                this.loading = true;
                let method = this.detail.caseAccessId ? caseApi.mod : caseApi.add;
                if(this.detail.caseDiscretionId||this.detail.caseDiscretionId==''){
                    this.detail.discretionid = this.detail.caseDiscretionId
                }
                let res = await method(this.detail);
                if(res.ok){
                    let resp = await caseApi.caseRegister({
                        id: this.detail.caseAccessId ? this.detail.caseAccessId : res.data.caseAccessId,
                        vars: { caseCreateUser: this.info.username , processKey:'xingyang_trafficeCase_handle'}
                    }); //启动流程
                    if (resp) {
                        let ok = resp.ok;
                        let taskId = resp.data.taskId
                        if (ok) {
                            let response = await caseApi.caseExamine({//立案流程
                                taskId: taskId,
                                commentMessage: "11111",
                                commentType: "",
                                vars: {}
                            });
                            if (response.ok) {
                                utils.showTips("立案成功", response.ok);
                                this.close({ tagName: "/case/reg/detail" });
                            }else{
                                utils.showTips("操作失败", response.ok);
                            }
                        }
                    }else{
                        utils.showTips("立案失败", response.ok);
                    }
                }
                this.loading = false;
            },
            async submitData() {
                this.loading = true;
                let method = this.detail.caseClueId ? caseclueApi.mod : caseclueApi.add;
                let res = await method(this.detail);
                if (res.ok) {
                    utils.showTips("操作成功");
                    this.cancle();
                    if(this.hideBtn==false){
                        this.cancle();
                    }
                } else {
                    utils.showTips("操作失败", false);
                }
                this.loading = false;
            },
            resizedetail(detail) {
                //提交前对数据进行处理
                if (detail.staffstr || detail.stafflist) {
                    delete detail.staffstr && delete detail.stafflist;
                }
                return detail;
            }
        }
    };
</script>
<style lang="scss">
    .case-detail {
        background: #fff;
        border: 1px solid #ccc;
        .case-body{
            .el-form {
                .el-form-item__label {
                    width: 120px !important;
                }
                .el-form-item__content {
                    margin-left: 120px !important;
                }
                .el-date-editor.el-input {
                    width: 100% !important;
                }
            }
        }

    }
</style>
